<template> <!-- 对战结果页面 -->
	<view class="wrap" v-if="!isLoading">
		<view class="layout-position">
			<!-- 背景音乐 -->
			<!-- 	<view class="layout-music flex justify-end">
				<view class="text m-right-30">背景音乐</view>
				<u-switch v-model="switchValue" size="32" ></u-switch>
			</view> -->
			<!-- 我的 -->
			<!-- 双方 -->
			<view class="layout-vs flex justify-between align-center m-top-30">
				<view class="user">
					<view class="hd hd-1">
						<avatar-image :url="game_info.user_left.avatar_url" :width="120" />
					</view>
					<view class="number number-1 flex justify-center align-center">
						<!-- <text class="sm m-right-10">(+10)</text> -->
						<image class="icon m-right-10" src="/static/image/bei.png" mode=""></image>
						<text class="da">{{game_info.user_left_score}}</text>
					</view>
					<view class="name name-1 flex justify-center align-center">
						<view class="text-single">{{game_info.user_left.nick_name}}</view>
					</view>
				</view>
				<view class="vs">
					<image class="full" src="/static/image/vs.png" mode=""></image>
				</view>
				<view class="user">
					<view class="hd hd-2">
						<avatar-image :url="game_info.user_right.avatar_url" :width="120" />
					</view>
					<view class="number number-2 flex justify-center align-center">
						<image class="icon m-right-10" src="/static/image/bei.png" mode=""></image>
						<text class="da">{{game_info.user_right_score}}</text>
						<!-- <text class="sm m-left-10">(+10)</text> -->
					</view>
					<view class="name name-2 flex justify-center align-center">
						<view class="text-single">{{game_info.user_right.nick_name}}</view>
					</view>
				</view>
			</view>

			<!-- 结果 -->
			<view class="layout-result">
				<view>
					<view class="imgbox">
						<image class="full" :src="game_info.user_left_name" mode=""></image>
					</view>
					<view class="num">{{game_info.user_left_suc}}</view>
					
				</view>

				<view class="btnbox">
					<button class="share-btn" open-type="share">
						分享成绩到微信
					</button>

				</view>
				<view class="btnbox flex justify-between">
					<view class="btn-half">
						<u-button :custom-style="resultBtn" shape="circle" @click="comeBackLink">再来一局</u-button>
					</view>
					<view class="btn-half">
						<u-button :custom-style="resultBtn" shape="circle" @click="isPopup = true">查看答题详情</u-button>
					</view>
				</view>
			</view>
		</view>
		<!-- 弹窗 -->
		<u-popup v-model="isPopup" mode="center" border-radius="14">
			<view class="popup-box">
				<view class="popup-centent bg-white">
					<view class="thead flex justify-end">
						<view class="icon"></view>
						<view class="td flex-1 td-1">题目</view>
						<view class="td td-2">答案</view>
					</view>
					<view class="tbody m-top-10">
						<view class="tr flex align-center" v-for="(item,index) in tiku">
							<view class="icon" v-if="item.is_right">
								<image class="full" src="/static/image/rtrue.png" mode=""></image>
							</view>
							<view class="icon" v-else>
								<image class="full" src="/static/image/rfalse.png" mode=""></image>
							</view>
							<view class="td td-1 flex-1 text-single">
								{{item.tiku.title}}
							</view>
							<view class="td td-2 text-single">{{item.tiku.desc}}</view>
						</view>

					</view>
				</view>
				<view class="btnbox">
					<view class="result-btn" @click="isPopup = false">返回</view>
				</view>
			</view>
		</u-popup>
		<!-- 右下角背景图 -->
		<view class="hi">
			<image class="full" src="/static/image/hi.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	import AvatarImage from '@/components/avatar-image'
	import * as UserApi from '@/api/user'
	import * as TikuApi from '@/api/dati/index'
	import * as GameApi from '@/api/dati/game'
	export default {
		components: {

			AvatarImage
		},
		data() {
			return {
				isLoading: true,
				tiku_result: {},
				tiku: [],
				userInfo: {},
				game_info: {},
				left_score: 0,
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				switchValue: true,
				isPopup: false,
				resultBtn: {
					color: '#ffffff',
					background: '#0197F8',
				},
				options:{},
				id: 0
			};
		},
		onLoad(options) {
			this.id = options.gameId
			this.options=options
			this.getGameInfo(options.gameId)
			this.getUserInfo()
			this.getResult(options.gameId)
		},
		methods: {
			getResult(gameId) {
				let app = this
				GameApi.getResult(gameId)
					.then(result => {
						console.log(96)

						app.tiku = result.data.list


					})
			},
			comeBackLink() {
				// this.$u.route('/pages/me/bank')
				this.$u.route({
					url: 'pagesNew/battle/wait',
					type: 'redirectTo',
				})
			},
			getUserInfo() {
				let app = this
				UserApi.info({})
					.then(result => {
						console.log(96)
						app.userInfo = result.data.userInfo

					})
			},
			getGameInfo(gameId) {
				GameApi.game_info({
						gameId: gameId
					})
					.then(result => {
						this.game_info = result.data.game
						if(this.options.score>0){
							this.game_info.user_right_score =this.options.score
						}
						this.left_score = result.data.game.user_left.score
						this.isLoading = false

					})
			},
			/**
			 * 分享当前页面
			 */
			onShareAppMessage() {
				const app = this
				// 构建页面参数
				const params = app.$getShareUrlParams({
					gameId: app.gameId
				});
				return {
					title: '我也要玩',
					path: "/pages/index/index?"
				}
			},

			/**
			 * 分享到朋友圈
			 * 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
			 * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
			 */
			onShareTimeline() {
				const app = this
				// 构建页面参数
				const params = app.$getShareUrlParams({
					gameId: app.gameId
				});
				return {
					title:'我也要玩',
					path: "/pages/index/index"
				}
			}

		}

	}
</script>

<style lang="scss">
	.share-btn {
		background-color: #0197F8;
		color: #FFF;
		border-radius: 50rpx;

	}

	.hi {
		position: fixed;
		right: 0;
		bottom: 100rpx;
		z-index: 1;
		width: 500rpx;
		height: 372rpx;
	}

	.layout-position {
		position: relative;
		z-index: 99;
	}

	.layout-music {
		padding: 20rpx 36rpx;

		.text {
			font-size: 36rpx;
			line-height: 38rpx;
			color: #101010;
		}
	}

	.layout-vs {
		position: relative;

		.vs {
			position: absolute;
			left: 50%;
			bottom: 0;
			z-index: 1;
			transform: translateX(-50%);
			width: 120rpx;
			height: 100rpx;
		}
	}

	.user {
		position: relative;
		width: 300rpx;
		height: 172rpx;
		padding-top: 10rpx;

		.hd {
			position: absolute;
			top: 0;
			z-index: 10;
			width: 120rpx;
			height: 120rpx;
		}
	}

	.name {
		// position: absolute;
		// bottom: 0;
		// z-index: 9;
		width: 100%;
		height: 100rpx;
		box-sizing: border-box;
		font-size: 32rpx;
		line-height: 40rpx;
		color: #fff;
	}

	.hd-1 {
		right: -20rpx;
	}

	.hd-2 {
		left: -20rpx;
	}

	.name-1 {
		// left: 0;
		padding: 0 40rpx 0 36rpx;
		background: url('~@/static/image/name-1.png') center no-repeat;
		background-size: 100% 100%;
	}

	.name-2 {
		// right: 0;
		padding: 0 36rpx 0 40rpx;
		background: url('~@/static/image/name-2.png') center no-repeat;
		background-size: 100% 100%;
	}

	.number {
		width: 100%;
		height: 72rpx;
		box-sizing: border-box;

		.icon {
			width: 60rpx;
			height: 60rpx;
		}
	}

	.number-1 {
		padding-right: 100rpx;
	}

	.number-2 {
		padding-left: 100rpx;
	}

	.sm {
		margin-top: -6rpx;
		font-size: 32rpx;
		font-weight: 600;
		line-height: 1;
		color: #FC2A2A;
	}

	.da {
		font-size: 40rpx;
		font-weight: 600;
		line-height: 1;
		color: #FC2A2A;
	}

	.layout-result {
		padding: 36rpx 20rpx;

		.imgbox {
			height: 500rpx;
		}

		.num {
			position: absolute;
			top: 455rpx;
			right: 215rpx;
			font-size: 18rpx;
			color: #ffaa00;
		}

		.name {
			position: absolute;
			top: 336rpx;
			left: 245rpx;
			font-size: 36rpx;
			color: #ffaa00;
		}
	}

	.btnbox {
		width: 580rpx;
		margin: 40rpx auto 0;
	}

	.result-btn {
		height: 80rpx;
		font-size: 36rpx;
		font-weight: bold;
		line-height: 80rpx;
		color: #fff;
		text-align: center;
		background: #0197F8;
		border: none;
		border-radius: 40rpx;
	}

	.btn-half {
		width: 260rpx;
	}

	.popup-box {
		width: 710rpx;
		height: auto;
		padding: 36rpx 0 50rpx;
		background: transparent;

		.popup-centent {
			padding: 20rpx 20rpx;
			min-height: 300rpx;
			border-radius: 10rpx;
		}

		.icon {
			width: 35rpx;
			height: 35rpx;
		}

		.td-1 {
			padding: 0 36rpx;
		}

		.td-2 {
			width: 180rpx;
			text-align: center;
		}

		.thead {
			font-size: 36rpx;
			font-weight: 600;
			line-height: 48rpx;
			color: #ADADAD;
			text-align: center;
		}

		.tbody {
			font-size: 32rpx;
			line-height: 40rpx;
			color: #101010;
		}
	}

	.tr {
		padding: 8rpx 0;
	}
</style>